<template>
  <div class="lottery">
    <div class="lotteryGames">
      <ul class="tit">
        <li
          v-for="item of typeList"
          :key="item.id"
          @click="selectType(item.id)"
          :class="activeId == item.id ? 'active__type' : ''"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="wrap">
        <div class="hd">
          <ul>
            <li
              :class="{ active: activeTab === 'all' }"
              @click="changeTab('all')"
            >
              全部游戏
            </li>
            <li
              :class="{ active: activeTab === 'hot' }"
              @click="changeTab('hot')"
            >
              热门游戏
            </li>
            <li
              :class="{ active: activeTab === 'favorite' }"
              @click="changeTab('favorite')"
            >
              收藏游戏
            </li>
          </ul>
          <div class="search">
            <input
              type="text"
              placeholder="请输入游戏名称"
              :value="game_name"
            />
            <div></div>
          </div>
        </div>
        <div class="changeTabRight">
          <ul class="game_list" v-if="list.length > 0">
            <li v-for="item in list" :key="item.id">
              <div class="normal">
                <div class="lazyload-wrapper">
                  <img :src="item.icon" alt="game_icon" class="game_icon" />
                </div>
                <div class="enter" @click="goGame(item.id)">
                  <img
                    src="@/assets/img/games/enter.png"
                    alt="enter-game"
                  />进入游戏
                </div>
              </div>
              <p class="allGame">{{ item.name }}</p>
            </li>
          </ul>
          <p v-else class="noData">{{ $t("noData") }}</p>
        </div>
      </div>
    </div>
    <Loading v-if="listLoading" />
  </div>
</template>
<script>
import { httpHomeList, httpEnterGame } from "@/http/api";
import Loading from "@/components/loading.vue";
export default {
  name: "electronic",
  components: { Loading },
  data() {
    return {
      game_name: "",
      activeTab: "all", // 默认选中的标签
      listLoading: false,
      list: [],
      startAjax: false,
      activeId: 1,
      typeList: [
        {
          id: 1,
          name: "PG电子",
        },
        {
          id: 2,
          name: "AG电子",
        },
        {
          id: 3,
          name: "MG电子",
        },
        {
          id: 4,
          name: "MT电子",
        },
        {
          id: 5,
          name: "夺宝电子",
        },
        {
          id: 6,
          name: "传奇电子",
        },
        {
          id: 7,
          name: "BBIN电子",
        },
        {
          id: 8,
          name: "FG电子",
        },
        {
          id: 9,
          name: "SG新霸电子",
        },
        {
          id: 10,
          name: "YGR电子",
        },
        {
          id: 11,
          name: "天豪电子",
        },
        {
          id: 12,
          name: "美博电子",
        },
        { id: 13, name: "夺宝电子彩票" },
      ],
    };
  },
  methods: {
    async goGame(id) {
      if (!localStorage.getItem("TOKEN")) {
        // this.$emit("toRegister");
        this.loginFormVisible = true;
        return;
      }
      if (this.startAjax) return;
      let params = {
        id,
      };
      this.startAjax = true;
      let res = await httpEnterGame(params);
      if (res.code == 0) {
        window.location.href = res.data.parameter.url;
      } else {
        this.$message.error(res.message);
      }
      this.startAjax = false;
    },
    changeTab(tab) {
      this.activeTab = tab; // 更新选中的标签
      if (tab === "hot") {
        this.getHttpHomeList("hot");
      } else {
        this.getHttpHomeList();
      }
    },
    selectType(id) {
      this.activeId = id;
    },

    // 游戏列表
    async getHttpHomeList(type) {
      let params = {
        page: 1,
        // category_id: 4,
      };
      if (type) {
        params.hot = 1;
      }
      this.listLoading = true;
      let res = await httpHomeList(params);
      if (res.code == 0) {
        this.list = [...this.list, ...(res.data.list || [])];
      }
      this.listLoading = false;
    },
  },
  mounted() {
    this.getHttpHomeList();
  },
};
</script>
<style lang="less" scoped>
.lottery {
  width: 100%;
  min-height: 750px;
  background: url("../../../assets/img/games/electronbg.png") no-repeat;
  background-size: 100% auto;
  background-position-y: -3px;
  background-color: #efefef;
  padding-bottom: 180px;
  padding-top: 270px;
  box-sizing: border-box;
  .lotteryGames {
    width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 35px;
    padding: 0 70px 50px;
    box-sizing: border-box;
    ul.tit {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 35px 15px 0;
      border-bottom: 1px solid #e5e5e5;
    }
    ul.tit li {
      width: 90px;
      cursor: pointer;
      height: 30px;
      text-align: center;
      line-height: 30px;
      margin: 0 25px 30px 0;
      -webkit-box-shadow: 0 5px 10px rgba(81, 51, 22, 0.3);
      box-shadow: 0 5px 10px rgba(81, 51, 22, 0.3);
      overflow: hidden;
      border-radius: 15px;
      -webkit-transition: 0.4s;
      -o-transition: 0.4s;
      transition: 0.4s;
      font-size: 14px;
      color: #513316;
    }
    ul.tit li.active__type,
    ul.tit li:hover {
      background: #513316;
      color: #fff;
    }
    .wrap {
      overflow: hidden;
      .hd {
        width: 100%;
        padding: 15px 0;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 142px;
            height: 48px;
            background: url(../../../assets/img/games/fishBtnBg2.png);
            margin-right: 12px;
            cursor: pointer;
            font-size: 16px;
            color: #fff;
            transition: 0.5s;
          }
          .active {
            background: url(../../../assets/img/games/fishBtnBg1.png);
          }
        }
        .search {
          float: right;
          width: 240px;
          height: 48px;
          position: relative;
          border-radius: 8px;
          border: 1px solid #cecece;
          box-sizing: border-box;
          box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
          input {
            width: 200px;
            height: 100%;
            text-indent: 20px;
            font-size: 15px;
            outline: none;
            border: none;
            background: none;
            padding-right: 40px;
          }
          div {
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 0;
            width: 46px;
            height: 46px;
            background: url(../../../assets/img/games/search.png) 50% no-repeat;
            border: none;
            outline: none;
          }
        }
      }
    }
    .game_list {
      display: flex;
      flex-wrap: wrap;
      min-height: 398px;
      li {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 155px;
        height: 175px;
        margin-top: 10px;
        padding: 5px;
        margin-right: 11px;
        cursor: pointer;
        overflow: hidden;
        border: 1px solid #513316;
        border-bottom: 0;
        box-sizing: border-box;
        .enter {
          display: none;
          position: absolute;
          width: 100%;
          height: 150px;
          font-size: 14px;
          left: 0;
          top: 0;
          text-align: center;
          z-index: 1;
          color: #fff;
        }
        .normal {
          position: absolute;
          height: 85%;
          width: 100%;
          left: 0;
          top: 0;
          padding: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          .game_icon {
            width: 110px;
            height: 110px;
          }
          &:hover {
            .enter {
              display: block;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
            :after {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.5);
            }
          }
        }
        .allGame {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 35px;
          line-height: 35px;
          padding-left: 10px;
          justify-content: space-around;
          font-size: 14px;
          background: #513316;
          color: #fff;
        }
      }
    }
  }
}
</style>
